<template>
	<view class="all">
		
		<!-- <view class="topSelect">
			<view class="input">
				<u-icon name="map" class="map"></u-icon>
				<view class="cont">贵州省六盘水</view>
				<u-icon name="arrow-down" class="arrow-down"></u-icon>
			</view>
		
	     </view> -->
	<!-- 顶部地区 -->
<!--	</u-sticky>-->
	<topArea/>
	
	    <view class="content">
		<!-- 总体概览 -->
		<view class="title">总体概览</view>		
			<ul class="allUl">
				<li class="text1">
				
				<ol class="ol1">
					<li>
						<text>22人</text><br>
						劳动力总数</li>
				</ol>
				<ol class="ol2">
					<li class="olTop">
						<text>22人</text><br>
						已更新</li>
					<li>
						<text>22人</text><br>
						已就业</li>
					
				</ol>
				<ol class="ol4">
					<li class="olTop">
						<text>22人</text><br>
						待更新</li>
					<li>
						<text>22人</text><br>
						待就业</li>
				</ol>
				</li>
				
				<li class="text2">
					<ol class="ol3">
						<li>
							<text>22人</text><br>
							退出劳动力市场
							</li>
						<li>
							<text>23人</text><br>
							已返乡</li>
						<li>
							<text>239人</text><br>
							务农</li>
					</ol>
				</li>
			</ul>
	</view>
	<!-- 重点人群分析 -->
	<view class="content">
		<view class="title">重点人群分析</view>	
		<view class="line">
		<view class="lineLef">城镇劳动力</view>
		<view class="lineCen"><u-line-progress :show-percent="false" :percent="90" :round="false" active-color="#4F9EED" inactive-color="#DBEBFA"></u-line-progress></view>
		<view class="lineRig">555</view>
		</view>
		
		<view class="line">
		<view class="lineLef">农村劳动力</view>
		<view class="lineCen"><u-line-progress :show-percent="false" :percent="30" :round="false" active-color="#4F9EED" inactive-color="#DBEBFA"></u-line-progress></view>
		<view class="lineRig">555</view>
		</view>
		
		<view class="line">
		<view class="lineLef">易地搬迁</view>
		<view class="lineCen"><u-line-progress :show-percent="false" :percent="50" :round="false" active-color="#4F9EED" inactive-color="#DBEBFA"></u-line-progress></view>
		<view class="lineRig">555</view>
		</view>
		
		<view class="line">
		<view class="lineLef">脱贫劳动力</view>
		<view class="lineCen"><u-line-progress :show-percent="false" :percent="10" :round="false" active-color="#4F9EED" inactive-color="#DBEBFA"></u-line-progress></view>
		<view class="lineRig">555</view>
		</view>
		
		<view class="line">
		<view class="lineLef">边缘户</view>
		<view class="lineCen"><u-line-progress :show-percent="false" :percent="70" :round="false" active-color="#4F9EED" inactive-color="#DBEBFA"></u-line-progress></view>
		<view class="lineRig">555</view>
		</view>
	</view>
	
	<!-- 劳动力属性分析 -->
	<view class="content">
		<view class="title">劳动力属性分析</view>	
		<view class="">
			<ul class="ldUl">
				<li @click="sonLi(1)" :class="[typeID==1?'li1':'li']">性别</li>
				<li @click="sonLi(2)" :class="[typeID==2?'li1':'li']">学历</li>
				<li @click="sonLi(3)" :class="[typeID==3?'li1':'li']">村居属性</li>
				<li @click="sonLi(4)" :class="[typeID==4?'li1':'li']">年龄</li>
			</ul>
			
			
			<view class="">
				
				内容{{typeID}}
				<!-- <ringEchart/>
				<columnEchart/> -->
				
				</view>
			</view>
	</view>
	
	<view class="content">
		<view class="title">劳动力分布</view>	
		<view class="">内容</view>
	</view>
	
	
	<!-- 底部导航栏 -->
	<ul class="footerUl">
		<li @click="Jump(1)" :class="[typeID1==1?'footli1':'footli']">
			<u-icon name="home" size="38"  class="icon1"></u-icon>
			<span>首页</span>
		</li>
		<li @click="Jump(2)" :class="[typeID1==2?'footli1':'footli']">
			<u-icon name="man-add"  size="38" class="icon1"></u-icon>
			<span>重点人群分析</span>
		</li>
	</ul>
	</view>
</template>

<script>
	import topArea from "../../pages/humanSociety/topArea.vue"
	// import ringEchart from "../../components/echart/ring-echarts.vue"
	// import columnEchart from "../../components/echart/column-echart.vue"
	export default{
		// onShow: function() {
		//     wx.hideHomeButton();  //隐藏home/返回主页按钮
		//   },
		components: {
					topArea,
					// ringEchart,
					// columnEchart
				},
		data(){
			return{
				typeID:1,
				typeID1:1,
				
			}
		},
		methods:{
			sonLi(id){
				this.typeID=id
				console.log(id);
			},
			Jump(id){
				this.typeID1=id
				if(id==2){						
					wx.reLaunch({
					    url: "/pages/humanSociety/keyGroups",
					});					
				}
				// else if(id==2){
				// 	uni.navigateTo({
				// 	    url: "/pages/humanSociety/workforceAnalytics",
				// 	});
				// }
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all{
		background: #F4F8FB;
		padding-bottom: 100px;
	}
	
	.content{
		background: #FFFFFF;
		// height: 300px;
		margin: 6px 10px 10px 10px;
		padding-bottom: 10px;		
        box-shadow:0 0 2px 2px #F1F2F7;
		padding: 6px;
		.title{
			line-height: 30px;
			border-bottom: 2px solid #F6F7F9;
			margin-bottom: 6px;
			
		}
		.ldUl{
			display: flex;
			justify-content: space-around;
			.li{
				width: 24%;
				height: 24px;
				line-height: 24px;
				text-align: center;
				border-radius: 4px;
				background: #EEF5FB;
				color: #3679E0;
			}
			.li1{
				width: 24%;
				height: 24px;
				line-height: 24px;
				text-align: center;
				border-radius: 4px;
               background: #3068D5;
               	color: white;
              }
			// .li1{
			// 	width: 24%;
			// 	height: 24px;
			// 	line-height: 24px;
			// 	text-align: center;
			// 	border-radius: 4px;
			// 	background: #3068D5;
			// 	color: white;
			// }
			
		}
		
		
		.one{
			 margin:10px 10px 0 10px;
			 border: 1px solid #509DED;
		}
		.two{
			 margin:10px;
			 border: 1px solid red;
		}
		.three{
			 margin: 0 10px 0 10px;
			 border: 1px solid green;
		}
		.line{
			display: flex;
			justify-content: space-between;
			color: #4F9EED;
			.lineLef{
				width: 20%;
				font-weight: bold;
			}
			.lineCen{
				width: 54%;
			}
			.lineRig{
				width: 10%;
			}
		}
		
	}
	.allUl{
		.text1{
			display: flex;
			justify-content: space-around;
			.ol1{
				
				width: 30%;
				text-align: center;
				li{
					border: 1px solid #E3AF4E;
					border-radius: 10px;
					height: 108px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text{
						color:  #E3AF4E;
					}
				}
			}
			.ol2{
				width: 30%;
				text-align: center;
				li{
					border: 1px solid #7BAAD8;
					height: 50px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 10px;
					text{
						color:  #7BAAD8;
					}
				}
				.olTop{
					margin-bottom: 6px;
					border: 1px solid #E3AF4E;
					text{
						color:  #E3AF4E;
					}
				}
			}
			.ol4{
				width: 30%;
				text-align: center;
				li{
					border: 1px solid #7BAAD8;
					height: 50px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 10px;
					text{
						color: #7BAAD8;
					}
				}
				.olTop{
					margin-bottom: 6px;
				}
			}
			
		}
		
		.text2{
			margin-top: 6px;
			
			.ol3{
				display: flex;
				justify-content: space-around;
				text-align: center;
				
				
				li{
					border: 1px solid #7BAAD8;
					height: 50px;
					width: 30%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 10px;
					text{
						color: #7BAAD8;
					}
					
					
					
				}
			}
		}
	}
    .footerUl{
		position: fixed;
		bottom: 0;
		font-size: 10px;
		color: gray;
		width: 100%;
		height: 40px;
		border: 1px solid #F0F0F0;
		background: white;
		display: flex;
		justify-content: space-between;
		.footli1{
			width: 49%;
			height: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #5D9BDC;
			.icon1{
				color: #5D9BDC;
			}
			
		}
		.footli{
			width: 49%;
			height: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: gray;
			.icon1{
				color: gray;
			}
			
		}
	}

</style>